import "./../sass/details.scss";
import "./../sass/reset.scss";
import $ from "jquery";

//放大镜
$(window).on("load", function () {
    //拿到小区域放大镜的盒子大小
    $(".scale-box").css("width", $(".bigBox").width() / $(".bigBox").find("img").width() * $(".smallBox").width())
    $(".scale-box").css("height", $(".bigBox").height() / $(".bigBox").find("img").height() * $(".smallBox").height())
    $(".smallBox").hover(function () {
            //移入
            $(this).find(".scale-box").show();
            $(this).parent().find(".bigBox").show();
            $(document).on("mousemove", function (e) {
                var disX = e.pageX - $(".smallBox").offset().left - $(".scale-box").width() / 2;
                var disY = e.pageY - $(".smallBox").offset().top - $(".scale-box").height() / 2;
                //判断是否超出小图区域
                if (disX <= 0) {
                    disX = 0
                }
                if (disY <= 0) {
                    disY = 0
                }
                if (disX >= $(".smallBox").width() - $(".scale-box").width()) {
                    disX = $(".smallBox").width() - $(".scale-box").width()
                }
                if (disY >= $(".smallBox").height() - $(".scale-box").height()) {
                    disY = $(".smallBox").height() - $(".scale-box").height()
                }
                //设置小区域移动
                $(".scale-box").css("left", disX);
                $(".scale-box").css("top", disY);
                //得出大图移动比例
                var sca = $(".bigBox").find("img").width() / $(".smallBox").find("img").width();
                //设置大图移动
                $(".bigBox").find("img").css("left", -disX * sca);
                $(".bigBox").find("img").css("top", -disY * sca);
            })
        },
        function () {
            //移出
            $(this).find(".scale-box").hide();
            $(this).parent().find(".bigBox").hide();
        })
    //设置小图切换
    $(".changeBox").children("ul").children("li").click(function () {
        var imgIndex=($(this).index());
        $(this).css("opacity",.5).siblings().css("opacity",1)
        $(".smallBox").find("img").eq(imgIndex).show().siblings().hide()
        $(".bigBox").find("img").eq(imgIndex).show().siblings().hide()
    })
    //飞入购物车 要判断是否登录
})